<!--
//
// ChooseUser.vue
// hs-admin
//
// Created by 区区电脑 on 2023/08/31.
//
-->
<template>
    <div class="ChooseUser">
        <div class="left">
            <div class="title">
                <el-checkbox :model-value="leftCheckAllState" @change="onLeftAllChange"/>
                <span>{{ titles[0] }}</span>
                <span></span>
            </div>
            <el-input v-model="leftKeyword" placeholder="姓名"/>
            <div class="list">
                <div v-for="item in filterLeftList" :key="item.id" class="user">
                    <el-checkbox v-model="item.used">{{item.realName}}</el-checkbox>
                </div>
            </div>
        </div>
        <div class="center">
            <el-button type="primary" @click="remove">
                <b-icon name="bi bi-arrow-left-short"/>
            </el-button>
            <el-button style="margin-left: unset" type="primary" @click="add">
                <b-icon name="bi bi-arrow-right-short"/>
            </el-button>
        </div>
        <div class="right">
            <div class="title">
                <el-checkbox :model-value="rightCheckAllState" @change="onRightAllChange"/>
                <span>{{ titles[1] }}</span>
                <span>{{rightList.length}} 人</span>
            </div>
            <el-input v-model="rightKeyword" placeholder="姓名"/>
            <div class="list">
                <div v-for="item in filterRightList" :key="item.id" class="user">
                    <el-checkbox v-model="item.used">{{item.realName}}</el-checkbox>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted, watch} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";

const props = defineProps({
    modelValue: {
        type: Array,
        default: () => []
    },
    orgIds: {
        type: Array,
        default: () => []
    },
    titles: {
        type: Array,
        default: () => []
    },
    leftList: {
        type: Array,
        default: () => []
    },
});
const emits = defineEmits(["update:modelValue"]);

// 路由
const router = useRouter();
// store
const store = useStore();

const leftKeyword = ref()
const rightKeyword = ref()

// 左边列表显示的数据
const filterLeftList = computed(() => {
    return props.leftList.filter(item => {
        // 先过滤选中的组织的显示
        if (!props.orgIds || props.orgIds.length === 0) return true; // 没有筛选组织
        for (let i = 0; i < item.orgIds.length; i++) {
            const userOrgId = item.orgIds[i];
            if (props.orgIds.findIndex(id => id === userOrgId) > -1) {
                return true
            }
        }
        return false;
    }).filter(item => {
        // 再过滤右边没有的才显示
        return props.modelValue ? props.modelValue.findIndex(id => id === item.id) < 0 : true;
    }).filter(item => {
        // 最后过滤符合搜索关键字的才显示
        return leftKeyword.value ? item.realName.indexOf(leftKeyword.value) > -1 : true
    })
})
// 右边列表数据
const rightList = ref([])
// 右边列表需要显示的数据
const filterRightList = computed(() => {
    if (!rightKeyword.value) return rightList.value;
    return rightList.value.filter(item => item.realName.indexOf(rightKeyword.value) > -1)
})

// 左全选按钮状态
const leftCheckAllState = computed(() => {
    return filterLeftList.value.length > 0 && filterLeftList.value.filter(item => item.used).length === filterLeftList.value.length
})
// 右全选按钮状态
const rightCheckAllState = computed(() => {
    return filterRightList.value.length > 0 && filterRightList.value.filter(item => item.used).length === filterRightList.value.length
})


function add() {
    const list = [];
    props.leftList.map(item => {
        if (item.used) {
            const temp = $lodash.cloneDeep(item)
            temp.used = false;
            list.push(temp)
            item.used = false
        }
    })
    rightList.value = rightList.value.concat(list);
    emits("update:modelValue", rightList.value.map(item => item.id))
}

function remove() {
    const list = rightList.value.filter(item => !item.used);
    rightList.value = list;
    emits("update:modelValue", rightList.value.map(item => item.id))
}

function onLeftAllChange(checked) {
    filterLeftList.value.map(item => {
        item.used = checked
    })
}
function onRightAllChange(checked) {
    filterRightList.value.map(item => {
        item.used = checked
    })
}

function setValue() {
    const list = [];
    props.leftList.map(item => {
        if (props.modelValue.findIndex(id => id === item.id) > -1) {
            const temp = $lodash.cloneDeep(item)
            list.push(temp)
        }
    })
    rightList.value = list;
}

watch(() => props.modelValue, (value, oldValue) => {
    if (!oldValue || oldValue.length === 0) {
        // 监听的情况下，只有从没值到有值才会重设
        setValue()
    }
})

onMounted(() => {
    setValue()
})
</script>

<style lang="scss" scoped>
.ChooseUser {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;

    .center {
        width: 120px;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }

    .left {
        width: calc(50% - 60px);
        height: 100%;
        box-sizing: border-box;
        border: 1px solid rgba(0, 0, 0, 0.1);
    }

    .right {
        width: calc(50% - 60px);
        height: 100%;
        box-sizing: border-box;
        border: 1px solid rgba(0, 0, 0, 0.1);
    }

    .title {
        width: 100%;
        height: 40px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background: #f0f0f0;
        box-sizing: border-box;
        padding: 0 10px;
    }

    .list {
        width: 100%;
        height: calc(100% - 72px);
        overflow: auto;

        .user {
            padding: 4px 10px;
        }
    }
}
</style>
